<template>
  <div>
    <van-nav-bar
      fixed
      :title="title"
      left-arrow
      @click-left="$utils.back($route.path);"
    />
    <div class="has-top ">
      <div class="bg-white pb-1">
        <div class="mlr-25">
          <content-search
            :search-val="searchVal"
            :placeholder="searchTips"
            search-type="1"
            @clear="clear"
            @getVal="getVal"
            @search="search"
          />
        </div>
        <datetime-filter
          :time-start-select="timeStartSelect"
          :time-end-select="timeEndSelect"
          :bg-white="bgWhite"
          @openDatetimeSelect="openDatetimeSelect"
          @onStartConfirm="onStartConfirm"
          @onEndConfirm="onEndConfirm"
          @close="close"
          @getData="getData"
        />
      </div>
      <div class="mlr-25">
        <productList :product-list="productList" :artificer="artificer" list-type="productWriteoff" />
        <no-data v-if="productList.length === 0" />
        <p v-if="end===true&&productList.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import contentSearch from 'components/contentSearch'
import noData from 'components/noData'
import productList from 'components/productList'
import datetimeFilter from 'components/datetimeFilter'
import { GetWriteoffRecordPage } from 'api/writeoff'
export default {
  components: {
    contentSearch,
    noData,
    productList,
    datetimeFilter
  },
  data() {
    return {
      bgWhite: true,
      searchVal: '',
      // 时间选择框显示
      timeStartSelect: false,
      timeEndSelect: false,

      GetWriteoffRecordPageRequest: {
        PageIndex: 1,
        PageSize: 10,
				artificer: false,
      },

      // 记录列表
      productList: [],

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      end: false,
			title: '核销记录',
			searchTips: '请输入会员号/姓名/手机',
			type: 0
    }
  },
  created() {
		if(this.$route.query.type == 2){
			this.type = 2
			this.artificer = true
			this.title = '服务记录'
			this.searchTips = '请输入客户/手机号/订单号'
		}
    this.GetWriteoffRecordPage()
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    search(val) {
      this.scollRequest = true
      this.end = false
      this.GetWriteoffRecordPageRequest.SearchKey = val
      this.GetWriteoffRecordPageRequest.PageIndex = 1
      this.productList = []
      this.GetWriteoffRecordPage()
    },
    clear() {
      this.searchVal = undefined
    },
    getVal(val) {
      this.searchVal = val
    },
    openDatetimeSelect() {
      debugger
      this.timeStartSelect = true
    },
    onStartConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = true
    },
    onEndConfirm() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },
    close() {
      this.timeStartSelect = false
      this.timeEndSelect = false
    },

    // 时间筛选
    getData(value) {
      this.scollRequest = true
      this.end = false
      this.clear()

      this.GetWriteoffRecordPageRequest.PageIndex = 1
      this.GetWriteoffRecordPageRequest.SearchKey = undefined
      this.GetWriteoffRecordPageRequest.StartTime = value.startDate ? value.startDate.replace(/\./g, '-') : null
      this.GetWriteoffRecordPageRequest.EndTime = value.endDate ? value.endDate.replace(/\./g, '-') : null
      this.productList = []
      this.GetWriteoffRecordPage()
    },
    GetWriteoffRecordPage() {
      GetWriteoffRecordPage(this.GetWriteoffRecordPageRequest,this.type).then(res => {
        if (res) {
          if (res.Data.length && res.Data.length > 0) {
            res.Data.forEach(tem => {
              tem.Id = tem.ID
              this.productList.push(tem)
            })
          }
          this.totalAmout = res.TotalAmout
          this.scollRequest = true
        }
      })
    },

    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (_this.$utils.getScrollHeight() - _this.$utils.getClientHeight() - _this.$utils.getScrollTop() <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          if (_this.GetWriteoffRecordPageRequest.PageIndex < _this.totalAmout) {
            _this.GetWriteoffRecordPageRequest.PageIndex++
            _this.GetWriteoffRecordPage()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.van-hairline--bottom::after{
  border-bottom-width:0;
}
</style>
